<template>
    <div class="common-size check-account">
        <page-head :pageHead="pageHeadData"></page-head>
        <div class="page-content">
            <div class="describe_box">
                <div class="describe-text" v-html="item" v-for="(item, index) in textData">
                </div>
            </div>
            <div class="page-chart page-chart1" ref="liquidfillDom">

            </div>
        </div>
        <page-footer :pageFooter="pageFooterData"></page-footer>
    </div>
</template>

<script>
  import pageHead from './pageHead.vue'
  import PageFooter from "./pageFooter.vue";
  import {nuxtMixins} from '../assets/javascript/mixin'
  import echartsConfig from '@/assets/javascript/echartsConfig'
  let echarts = require('echarts')
  require('echarts-liquidfill')
  export default {
    name: 'checkAccount',
    props:['chartData'],
    mixins: [nuxtMixins],
    data() {
      return {
        pageTitle: '对账情况',
        repeatRemark: ['*  盘准率：盘准设备数量／台账设备数量；反映医院台账管理情况', '*  覆盖率：盘珠设备数量／实际设备数量；反映医院设备管理情况']
      }
    },
    computed:{
      chartDataTable () {
        return this.chartData.chartData
      },
      textData () {
        return this.chartData.textData
      }
    },
    created() {
    },
    mounted() {
      this.liquidfillChart()
    },
    methods: {
      liquidfillChart () {
        if (!this.chartData) {
          return false
        }
        const  liquidfillData = this.chartData.chartData
        if (!liquidfillData) {
          return false
        }
        const option = {
          title: {
            show: true,
            text: liquidfillData.titleName + '对账情况',
            left: 'center',
            bottom: 40,
            textStyle: {
              color: '#666',
              fontWeight: 400,
              fontSize: echartsConfig.titleFontSize || 14
            }
          },
          backgroundColor: '#fff',
          series: [{
            type: 'liquidFill',
            data: [{
              value:liquidfillData.value,
              itemStyle: {
                normal: {
                  color: '#b3bede',
                  shadowBlur: 0
                }
              },
              phase: Math.PI
            }, {
              value: liquidfillData.value,
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#5985c8' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#446fb1' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  shadowBlur: 0
                }
              },
              phase: 0
            }],
            period: 4000,
            waveLength: '100%',
            waveAnimation: 0,
            outline: {
              show: false
            },
            label: {
              normal: {
                formatter: function(param) {
                  return '盘准率 ' + param.value * 100 + '%'
                },
                textStyle: {
                  fontSize: 24
                },
                position: ['50%', '70%']
              }
            },
            backgroundStyle: {
              color:  {
                type: 'radial',
                colorStops: [{
                  offset: 0, color: '#fff' // 0% 处的颜色
                }, {
                  offset: 1, color: '#e5e8f3' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            }
          }]
        };
        this.liquidfillEchart = echarts.init(this.$refs.liquidfillDom)
        this.liquidfillEchart.setOption(option)
      }
    },
    components: {
      PageFooter,
      pageHead
    }
  }
</script>

<style lang="scss">
    .check-account {
        .page-content {
            margin-top: 10px;
            .describe_box {
                .describe-text {
                    text-indent:2em;
                    color: #666;
                    font-size: 18px;
                    line-height: 32px;
                    margin-bottom:10px;
                }
            }
            .page-chart {
                margin-top: 45px;
                height: 410px;
            }
        }
    }
</style>
